<template>
	<m-layout :title="title" :goBack="false">
		<web-view class="wv" :src="httpUrl" @message="getH5Message"></web-view>
	</m-layout>
</template>

<script>
	var wv; 
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				title: '外部浏览器',
				httpUrl: '',
				type: '',
				nav: true,
			};
		},
		computed: {
			...mapState({})
		},
		onLoad({ url, title = '', type = "", nav = true }) {
			this.httpUrl = decodeURIComponent(url)
			console.log(url)
			this.title = title;
			this.type = type;
			this.nav = nav;
			this.init();
		},
		methods: {
			init() {
				let height = 0; //定义动态的高度变量
				let statusbar = 0; // 动态状态栏高度
				uni.getSystemInfo({ // 获取当前设备的具体信息
					success: (sysinfo) => {
						statusbar = sysinfo.statusBarHeight;
						height = sysinfo.windowHeight;
					}
				});
				// #ifdef APP-PLUS
				let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
				setTimeout(function() {
					wv = currentWebview.children()[0];
					wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
						top: statusbar + 44, //此处是距离顶部的高度，应该是你页面的头部
						height: height - 44, //webview的高度
					})
					wv.addEventListener(
						"progressChanged",
						function(e) {
							wv.canBack(function(e) {
								self.canBack = e.canBack;
							});
						},
						false
					);
				}, 200); //如页面初始化调用需要写延迟
				// #endif
			},
			// uni-app 中的代码
			getH5Message(e) {
				console.log('来自webview的消息', e)
				var item = e.detail.data[0]
				switch (item.type) {
					case 'back':
						this.Jump()
						break;
					default:
						uni.showToast({
							title: item.message,
							duration: 2000
						});
						break;
				}
			},

		},
		onBackPress(options) {
			// this.Jump()
			if (wv && this.canBack) {
				wv.back();
				return true;
			}
			return false;
		}

	};
</script>

<style scoped lang="scss">
	.wv {
		height: 100vh;
	}
</style>